
<template>
    <view class="u-page">
		<view class="head">
			<div class="headline">
				<div class="placeOption">
					<u-picker :show="SellCarsPlaceShow" :columns="columns" @cancel="cancelHandler" @confirm="confirmHandler"></u-picker>
					<span class="optionText" @click="SellCarsPlaceShow = true;isPick=0">{{showSellCarsPlace}}</span>
					<u-icon name="arrow-down-fill" color="white" size="10" @click="SellCarsPlaceShow = true;isPick=0"></u-icon>
				</div>
				<p class="modelName">我要卖车</p>
				<u-icon name="bell" color="white" size="25"></u-icon>
			</div>
		</view>
		<view class="car_info">
			<div class="info-head">
				<span class="info-one">{{num}}</span>
			    <span>辆车已经成功卖出</span>
			</div>
			<div class="yuyueSellCarButton">
				<u-button text="预约卖车" color="linear-gradient(to bottom, #4481EB, #04BEFE)" style="width:95%;border-radius: 10px;"/>
			</div>
			<div class="otherButton">
				<u-button type="primary" :plain="true" text="免费咨询" style="width:45%;border-radius: 10px;" @click="message()"></u-button>
				<u-button type="primary" :plain="true" text="爱车估价" style="width:45%;border-radius: 10px;" @click="assess()"></u-button>
			</div>
		</view>
		<view class="bottom">
			<span class="jiacu">卖出高价</span>
			<image src="../../static/maiche/矩形5.png" style="width: 22px;height: 5px;margin-top: 10px;"/>
			<span style="font-size: 13px;margin-top: 10px;">优质客源销售<br>帮您多卖25%</span>
			<view class="carInformation">
				<div class="detailInfo u-border" v-for="(item,index) in carInformationData" :key="index">
				    <div class="title1">
				        <span>近期成交</span>
				        <span>{{item.name}}</span>
				    </div>
				    <div class="title2">
				        <div class="imgInfo">
							<img :src="item.imgSrc">
				        </div>
				        <div  class="imgCarInfo">
							<ul>
				                <li>{{item.carInfo}}</li>
				                <li>{{item.carDate}}&nbsp;{{item.kilometre}}</li>
				            </ul>
				        </div>
					</div>
				</div>
			</view>
		</view>
	</view>
		</view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
				        src:"../../static/maiche/bigche.png",
                SellCarsPlaceShow: false,
				        showSellCarsPlace:'请选择',
                pickerValue: '',
                num: "256235",
				columns: [
					['请选择','深圳', '广州', '北京','上海'],
				],
				carInformationData:[
				    {name:"张先生",imgSrc:require("../../static/tu/sellcardetailtu.png"),carInfo:"A车/2016款 2.0T 自动舒适带天窗",carDate:"2016年",kilometre:"2.63万公里"},
				    {name:"张先生",imgSrc:require("../../static/tu/sellcardetailtu.png"),carInfo:"A车/2016款 2.0T 自动舒适带天窗",carDate:"2016年",kilometre:"2.63万公里"},
				    {name:"张先生",imgSrc:require("../../static/tu/sellcardetailtu.png"),carInfo:"A车/2016款 2.0T 自动舒适带天窗",carDate:"2016年",kilometre:"2.63万公里"},
				    {name:"张先生",imgSrc:require("../../static/tu/sellcardetailtu.png"),carInfo:"A车/2016款 2.0T 自动舒适带天窗",carDate:"2016年",kilometre:"2.63万公里"},
				]
            }
        },

        methods:{
            confirmHandler(e){
				        this.showSellCarsPlace = e.value[0]
                this.SellCarsPlaceShow = false
            },
            cancelHandler(){
                this.SellCarsPlaceShow = false
            },
            message(){
              uni.navigateTo({
                //保留当前页面，跳转到应用内的某个页面
                url: '/pages/maiche/onlineConsulter'
              })
            },
            assess(){
              uni.navigateTo({
                //保留当前页面，跳转到应用内的某个页面
                url: '/pages/maiche1/assess'
              })
            },
        }
    }
</script>

<style lang="scss" scoped>
	.u-page{
		width: 100%;
		height: 100%;
		position: absolute;
		background: url(../../static/maiche/bigche.png) no-repeat;
		background-size:100%;
	}
	.head{
		/* margin:0px;
		background: url(../../static/maiche/bigche.png) no-repeat;
		background-size:100% 100%;
		background-attachment:fixed; */
		/* background-image: url("../../static/maiche/bigche.png");
		background-size: contain; */
	}
	.headline{
		padding-top: 50px;
		padding-left: 15px;
		padding-right: 15px;
		/*设置显示样式**/
		display: flex;
		/**子view垂直居中*/
		align-items: center;
		/**垂直居中*/
		vertical-align: center;
		/* 子view排列方式row--水平 column--垂直 */
		flex-direction: row;
		/* position: relative; */
	}
	.modelName{
		margin: auto;
		color:white;
		font-weight: bold;
	}
	.placeOption{
		width: 17%;
		font-size: 10px;
		/*设置显示样式**/
		display: flex;
		/**子view垂直居中*/
		align-items: center;
		/**垂直居中*/
		vertical-align: center;
		/* 子view排列方式row--水平 column--垂直 */
		flex-direction: row;
		/* position: relative; */
	}
	.optionText{
		color: white;
	}
    .car_info{
		width: 90%;
		margin:auto;
		margin-top: 260rpx;
		background-color: #fff;
		border-radius: 10px;
		
	}
	.info-head{
		width: 80%;
		padding-top: 20px;
		padding-left: 20px;
	}
	.info-one{
		font-size: 25px;
		padding-right:5px ;
		color: orangered;
	}
	.yuyueSellCarButton{
		margin-top: 20px;
		padding-bottom: 25px;
	}
	.otherButton{
		/*设置显示样式**/
		display: flex;
		/**子view垂直居中*/
		align-items: center;
		/**垂直居中*/
		vertical-align: center;
		/* 子view排列方式row--水平 column--垂直 */
		flex-direction: row;
		/* position: relative; */
	}
	.bottom{
		width: 100%;
		margin-top: 30px;
		margin-left: 20px;
		/*设置显示样式**/
		display: flex;
		/**子view垂直居中*/
		/* align-items: center; */
		/**垂直居中*/
		vertical-align: center;
		/* 子view排列方式row--水平 column--垂直 */
		flex-direction: column;
	}
	.jiacu{
		font-size: 15px;
		width: 100%;
		font-weight: bolder;
	}
	.carInformation{
        padding-bottom: 15%;
    }
	.detailInfo{
		margin-top: 10px;
	    width:90%;
	    height: 30%;
		border-radius: 10px;
	}
	.title1{
		padding-left:10px;
		color: orangered;
		font-size: 10px;
		padding-bottom: 10px;
		padding-top: 10px;
	}
	.title1 span:nth-child(2){
		margin-left: 10px;
	}
	.title2{
		/*设置显示样式**/
		display: flex;
		/**子view垂直居中*/
		/* align-items: center; */
		/**垂直居中*/
		vertical-align: center;
		/* 子view排列方式row--水平 column--垂直 */
		flex-direction: row;
	}
	.imgInfo{
		padding-left: 10px;
		padding-bottom: 10px;
	}
	.imgCarInfo{
        font-size: 13px;
        padding-right: 20px;
    }
	ul {
		list-style-type: none;
	}
	ul li:nth-child(1){
		padding-bottom: 10px;
		font-size: 13px;
	}
	ul li:nth-child(2){
		font-size: 10px;
		color:gray;
	}
</style>